<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <title>客服管理</title>
    <style>
        body{
            margin: 0;
        }
        box-card{
            border-bottom: 1px solid rgba(0, 0, 0, .12);
            background-color: #EBEEF5;
        }
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 70%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="top">
        <el-card class="box-card">
            <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
            <span style="font-size: 15px;margin-left: 10px">客服管理</span>
            <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
        </el-card>
    </div>
    <div id="main">
        <el-row :gutter="20">
            <el-col :span="6"> <el-card shadow="hover" style="height: 90px">
                <el-col :span="6">
                    <el-image th:src="@{static/img/1.png}"></el-image>
                </el-col>
                <el-col :span="18" style="line-height: 30px">
                    <el-row>历史接待次数</el-row>
                    <el-row> {{countTimes}}</el-row>
                </el-col>
            </el-card></el-col>
            <el-col :span="6"> <el-card shadow="hover" style="height: 90px">
                <el-col :span="6">
                    <el-image th:src="@{static/img/2.png}"></el-image>
                </el-col>
                <el-col :span="18" style="line-height: 30px">
                    <el-row>历史接待人数</el-row>
                    <el-row> {{countManTimes}}</el-row>
                </el-col>
            </el-card></el-col>
            <el-col :span="6"> <el-card shadow="hover" style="height: 90px">
                <el-col :span="6">
                    <el-image th:src="@{static/img/3.png}"></el-image>
                </el-col>
                <el-col :span="18" style="line-height: 30px">
                    <el-row>今日接待次数</el-row>
                    <el-row> {{countTimesToday}}</el-row>
                </el-col>
            </el-card></el-col>
            <el-col :span="6"> <el-card shadow="hover" style="height: 90px">
                <el-col :span="6">
                    <el-image th:src="@{static/img/4.png}"></el-image>
                </el-col>
                <el-col :span="18" style="line-height: 30px">
                    <el-row>今日接待人数</el-row>
                    <el-row> {{countManTimesToday}}</el-row>
                </el-col>
            </el-card></el-col>
        </el-row>

        <div id="dataTable">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span style="font-size: 15px"><i class="el-icon-s-data"></i> 数据列表</span>
                    <el-form style="float: right;">
                        <el-button @click="dialogFormVisible = true">添加</el-button>
                        <el-select v-model="pageSizeChange" placeholder="显示条数" style="width: 150px" @change="sizeChange">
                            <el-option label="显示10条" value= 10 ></el-option>
                            <el-option label="显示15条" value= 15 ></el-option>
                            <el-option label="显示20条" value= 20 ></el-option>
                            <el-option label="显示30条" value= 30 ></el-option>
                        </el-select>
                        <el-select v-model="cousLimit" placeholder="排序方式" style="width: 150px" @change="sortChange">
                            <el-option label="添加时间正序" value="1"></el-option>
                            <el-option label="添加时间倒序" value="2"></el-option>
                            <el-option label="最后登录正序" value="3"></el-option>
                            <el-option label="最后登录倒序" value="4"></el-option>
                        </el-select>
                    </el-form>
                </div>
                <template>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column prop="id" type="selection" width="55"></el-table-column>
                        <el-table-column prop="staffBean.name" label="成员账号" ></el-table-column>
                        <el-table-column prop="customerName" label="客服名称"></el-table-column>
                        <el-table-column prop="createTime" label="添加时间"></el-table-column>
                        <el-table-column prop="lastLoginTime" label="最后登录"></el-table-column>

                        <el-table-column label="是否启用">
                            <template scope="scope">
                                <el-switch v-model="scope.row.status" @change=change(scope.$index,scope.row)
                                           active-color="#13ce66" inactive-color="#ff4949"></el-switch></template>
                        </el-table-column>

                        <el-table-column label="操作"><template scope="scope">
                            <el-button style="float:left; padding: 3px 0" type="text" @click=viewDetail(scope.row)>查看</el-button>
                            <el-button style="float: left; padding: 3px 0" type="text" @click=mod(scope.row)>编辑</el-button>
                            <el-button style="float: left; padding: 3px 0" type="text" @click=del(scope.row.id)>删除</el-button>
                        </template></el-table-column>
                    </el-table>
                </template>
                <template>
                    <div class="block">
                        <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-size="pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </template>
            </el-card>
        </div>

    </div>


    <el-dialog title="添加客服" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="客服昵称" :label-width="formLabelWidth">
                <el-input v-model="form.customerName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="成员账号" :label-width="formLabelWidth">
                <el-select v-model="form.staffBean.deptBean.id" placeholder="请选择部门" @change="getStaff">
                    <el-option v-for="(g,index) in depts" :key="g.id" :label="g.deptName" :value="g.id"></el-option>
                </el-select>
                <el-select v-model="form.staffBean.id" placeholder="请选择成员">
                    <el-option v-for="(s,index) in staffs" :key="s.id" :label="s.name" :value="s.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form.remark" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrModFraud">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog :title="viewTitle" :visible.sync="dialogViewVisible">
        <el-table :data="detailData" height="120" border style="width: 100%">
            <el-table-column prop="customerTimes" label="历史接待次数"></el-table-column>
            <el-table-column prop="customerManTimes" label="历史接待人数"></el-table-column>
            <el-table-column prop="customerTimesToday" label="今日接待次数"></el-table-column>
            <el-table-column prop="customerManTimesToday" label="今日接待人数"></el-table-column>
        </el-table>

        <el-tabs tab-position="top" style="height: 40px;" @tab-click="handleClick">
            <el-tab-pane label="今天" name="1"></el-tab-pane>
            <el-tab-pane label="最近一周" name="2"></el-tab-pane>
            <el-tab-pane label="最近一月" name="3"></el-tab-pane>
            <el-tab-pane label="全部" name="0"></el-tab-pane>
        </el-tabs>

        <el-row>
            <el-col :span="12">
                <el-card v-for="i in viewData.tableData" :key="i.id" shadow="hover" @click.native="msgChange(i.customerMsgDetails)">
                    <el-row>{{i.userBean.userName}}</el-row>
                    <el-row>{{i.startTime}} -- {{i.endTime}}</el-row>
                </el-card>
                <div class="block">
                    <el-pagination
                            @current-change="handleViewCurrentChange"
                            :current-page="viewData.currentPage"
                            :page-size="viewData.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="viewData.total">
                    </el-pagination>
                </div>
            </el-col>
            <el-col :span="12" style="border: 1px solid lightgrey;padding:5px;height: 800px;overflow: auto;">
                <el-card v-for="i in viewData.msgData" :key="i.id">
                    <el-row style="color: #C0C4CC">{{i.senderName}}  {{i.sendTime}}</el-row>
                    <el-row>{{i.massage}}</el-row>
                </el-card>
            </el-col>
        </el-row>





    </el-dialog>

</div>
</body>
<script th:inline="javascript">
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            pageSize:10,
            pageSizeChange:"",
            currentPage:1,
            total:0,
            sort:"id",
            sortOrder:"desc",
            cousLimit:"",
            countTimes:"",countManTimes:"",countTimesToday:"",countManTimesToday:"",
            //模态框
            dialogFormVisible:false,
            formLabelWidth: '120px',
            form: {
                id:0,
                customerName:"",
                remark:"",
                staffBean:{
                    id:"",
                    deptBean:{
                        id:"",
                    },
                },
            },
            depts:[],
            staffs:[],
            //详情模态框
            dialogViewVisible:false,
            viewTitle:"客服：",
            detailData:[{
                customerTimes:"",customerManTimes:"",customerTimesToday:"",customerManTimesToday:"",
            }],
            viewData: {
                total:0,
                tableData:[],
                msgData:[],
                currentPage:1,
                pageSize:10,
                customerId:"",
                customerMsgId:"",
            }
        },
        methods:{
            getData(){
                axios.get([[@{customer/findLimit}]],{
                    params:{
                        limit:this.pageSize,
                            offSet:0,
                            pageNum:this.currentPage,
                            sort:this.sort,
                            sortOrder:this.sortOrder,
                    }
                }).then(res=>{
                    console.info(res.data.data.rows[0])
                    this.total = res.data.data.total;
                    this.tableData=res.data.data.rows;
                    for(let i = 0 ;i<this.tableData.length;i++){
                        if(this.tableData[i].status === 0){
                            this.tableData[i].status = true;
                        }
                    }
                }).catch(err=> console.info(err))
            },
            handleCurrentChange(val){
                this.currentPage=val;
                this.getData();
            },
            handleViewCurrentChange(val){
                this.viewData.currentPage=val;
                this.getMsgLimit();
            },
            change(index,row){
                let us = row.status ?0:1;
                axios.put([[@{customer/statusChange/}]]+row.id+"/"+us).then().catch(error => {console.log(error);})
            },
            sizeChange(){
                // alert(this.pageSizeChange);
                this.pageSize= +this.pageSizeChange;
                this.getData();
            },
            sortChange(){
                if(this.cousLimit == "1"){
                    this.sort= "create_time";
                    this.sortOrder="";
                }else if(this.cousLimit == "2"){
                    this.sort= "create_time";
                    this.sortOrder="desc";
                }else if(this.cousLimit == "3"){
                    this.sort= "last_login_time";
                    this.sortOrder="";
                }else if(this.cousLimit == "4"){
                    this.sort= "last_login_time";
                    this.sortOrder="desc";
                }
                this.getData();
            },
            del(id){
                axios.delete([[@{customer/}]]+id).then(res=>{
                    this.getData();
                }).catch(err=> console.info(err))
            },
            viewDetail(row){
                this.viewTitle="当前客服："+row.customerName;
                axios.get([[@{customer/getMsg/}]]+row.id).then(res=>{
                    // alert(res.data.countTimes)
                    this.detailData[0].customerTimes=res.data.countTimes;
                    this.detailData[0].customerTimesToday=res.data.countTimesToday;
                    this.detailData[0].customerManTimes=res.data.countManTimes;
                    this.detailData[0].customerManTimesToday=res.data.countManTimesToday;
                }).catch(err=>console.info(err));

                this.viewData.customerId=row.id;
                this.getMsgLimit();

                this.dialogViewVisible = true;
            },
            getMsgLimit(cid){
                axios.get([[@{customer/getMsgLimit}]],{
                    params: {
                        limit: this.viewData.pageSize,
                        offSet: 0,
                        pageNum: this.viewData.currentPage,
                        sort: "start_time",
                        sortOrder: "desc",
                        id: this.viewData.customerId,
                    }
                }).then(res=>{
                    // console.info(res);
                    this.viewData.total = res.data.data.total;
                    this.viewData.tableData=res.data.data.rows;
                    this.viewData.msgData=res.data.data.rows[0].customerMsgDetails;
                }).catch(err=>console.info(err));
            },
            msgChange(row){
                this.viewData.msgData=row;
            },
            addOrModFraud(){
                if(this.form.id == 0){
                    axios({
                        method:"POST",
                        url:[[@{customer/addCustomer}]],
                        data:this.form
                    }).then(res=>{
                        this.form.id=0;
                        this.getData();
                        this.dialogFormVisible = false;
                    }).catch(err=>console.info(err));
                }else {
                    axios({
                        method:"PUT",
                        url:[[@{customer/modCustomer}]],
                    data:this.form
                }).then(res=>{
                        this.form.id=0;
                        this.getData();
                        this.dialogFormVisible = false;
                    }).catch(err=>console.info(err));
                }
            },
            mod(row){
                this.form.id=row.id;
                this.form.customerName=row.customerName;
                this.form.remark=row.remark;

                // this.from.staffName=row.staffBean.name;
                this.form.staffBean.deptBean.id=row.staffBean.deptBean.id;
                this.getStaff()
                this.form.staffBean.id=row.staffBean.id;

                this.dialogFormVisible = true;
            },
            getStaff(){
                axios.get([[@{customer/getStaff}]],{
                    params:{
                        id:this.form.staffBean.deptBean.id
                    }
                }).then(res=>{
                    this.staffs=res.data.data
                }).catch(err=>console.info(err));
            },
            handleClick(tab, event){
                // alert(tab.name);
            }
        },
        created:function () {
            axios.get([[@{customer/getMsg/0}]]).then(res=>{
                // alert(res.data.countTimes)
                this.countTimes=res.data.countTimes;
                this.countTimesToday=res.data.countTimesToday;
                this.countManTimes=res.data.countManTimes;
                this.countManTimesToday=res.data.countManTimesToday;
            }).catch(err=>console.info(err));
            this.getData();

            axios.get([[@{customer/getDept}]]).then(res=>{
                this.depts=res.data.data
            }).catch(err=>console.info(err));
        }
    });
</script>
</html>